<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue测试</title>
    <link rel="stylesheet" href="public/css/bootstrap.min.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">

</head>
<body>
<div id="app">
    <table class="table table-responsive table-bordered">
        <th>单价</th>
        <th>数量</th>
        <th>总价</th>
        <tr>
            <td>{{price|money}}</td>
            <td>
                <div class="btn btn-success glyphicon-minus" @click="changeCount(false)"></div>
                {{ count }}
                <div class="btn btn-success glyphicon-plus" @click="changeCount(true)"></div>
            </td>
            <td>{{total|money}}</td>
        </tr>
    </table>
</div>
<div id="app2">
    <el-button @click="visible = true">按钮</el-button>
    <el-dialog v-model="visible" title="Hello world">
        <p>欢迎使用 Element</p>
    </el-dialog>

    <el-badge :value="199" :max="99" class="item">
        <button class="btn btn-success">新消息</button>
    </el-badge>

</div>
</body>
<!-- 引入组件库 -->
<script src="public/libs/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            price: 24.61,
            count: 1,
            total: 0
        },
        mounted: function () {
            this.$nextTick(function () {
                this.total = this.count * this.price
            })
        },
        methods: {
            changeCount: function (add) {
                if (add) {//增加按钮
                    this.count++;
                } else {//减少按钮
                    --this.count;
                    if (this.count < 1) {//不能小于1
                        this.count = 1;
                    }
                }
                this.total = this.count * this.price;
            }
        },

    })
    // 过滤器
    Vue.filter('money', function (value) {
        return value.toFixed(2);//保留两位小数
    })

    var app2=new Vue({
        el:'#app2',
        data:{
            visible:false
        }
    })
</script>
</html>